import React, { useState } from "react";
import classnames from "classnames";
import "./index.less";
import { NavBar, Popup, Button } from "@/ui";
const Page = (props) => {
  const cls = classnames("m-react-page-popup");
  const [visible, setVisible] = useState<boolean>(false);
  const [visibleSlideUp, setVisibleSlideUp] = useState<boolean>(false);
  const [visibleRightUp, setVisibleRightUp] = useState<boolean>(false);
  const [visibleLeftUp, setVisibleLeftUp] = useState<boolean>(false);
  const [visibleTopUp, setVisibleTopUp] = useState<boolean>(false);


  return (
    <div className={cls}>
      <NavBar title="Popup" />
      <div className="btn" onClick={() => setVisible(true)}>
        <Button size="m">点我试试</Button>
      </div>
      <div className="btn" onClick={() => setVisibleSlideUp(true)}>
        <Button size="m">popup slide 效果</Button>
      </div>
      <div className="btn" onClick={() => setVisibleTopUp(true)}>
        <Button size="m">popup top 效果</Button>
      </div>
      <div className="btn" onClick={() => setVisibleRightUp(true)}>
        <Button size="m">popup right 效果</Button>
      </div>
      <div className="btn" onClick={() => setVisibleLeftUp(true)}>
        <Button size="m">popup left 效果</Button>
      </div>
     
      <Popup
        visible={visible}
        onClose={() => setVisible(false)}
        type="basic"
        position="center"
      >
        <div className="demo-content">
          <h2>公告提示</h2>
          <p>我叫吴佳宾，爱我就抱抱</p>
          <button onClick={() => setVisible(false)}>确定</button>
        </div>
      </Popup>
      <Popup
        visible={visibleSlideUp}
        onClose={() => setVisibleSlideUp(false)}
        type="slide-up"
      >
        <div className="demo-slide-content">
        <h2>公告提示</h2>
          <p>我还单身呢，感兴趣就加个联系方式<br/> my-tel:13097165286</p>
          <button onClick={() => setVisibleSlideUp(false)}>确定</button>
        </div>
      </Popup>
      <Popup
        visible={visibleRightUp}
        onClose={() => setVisibleRightUp(false)}
        type="right-up"
      >
        <div className="demo-right-content">
          <h2>公告提示</h2>
          <p>我还单身呢，感兴趣就加个联系方式 my-tel:13097165286</p>
          <button onClick={() => setVisibleRightUp(false)}>确定</button>
        </div>
      </Popup>
      <Popup
        visible={visibleLeftUp}
        onClose={() => setVisibleLeftUp(false)}
        type="left-up"
      >
        <div className="demo-left-content">
          <h2>公告提示</h2>
          <p>我还单身呢，感兴趣就加个联系方式 my-tel:13097165286</p>
          <button onClick={() => setVisibleLeftUp(false)}>确定</button>
        </div>
      </Popup>
      <Popup
        visible={visibleTopUp}
        onClose={() => setVisibleTopUp(false)}
        type="top-up"
      >
        <div className="demo-top-content">
          <h2>公告提示</h2>
          <p>我还单身呢，感兴趣就加个联系方式 my-tel:13097165286</p>
          <button onClick={() => setVisibleTopUp(false)}>确定</button>
        </div>
      </Popup>
    </div>
  );
};
export default Page;
